<template>
  <a-modal :title="title" :visible="visible" @ok="submit" width="1000px" @cancel="visible = false">
    <a-table
      :rowKey="
        (r, i) => {
          return r
        }
      "
      :scroll="{ y: 400 }"
      :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
      width="700px"
      :columns="columns"
      :data-source="couponList"
      :pagination="false"
    >
      <span slot="name" slot-scope="text">
        <a-tooltip placement="topLeft" :title="text">
          <div class="name">{{ text }}</div>
        </a-tooltip>
      </span>

      <span slot="youhui" slot-scope="text">
        {{ text.discount_type === '1' ? `￥${text.sub_price}` : `${text.discount}折` }}
      </span>

      <span slot="type" slot-scope="text">
        {{ text.discount_type === '1' ? `满减` : `折扣` }}
      </span>

      <span slot="created_at" slot-scope="text">
        {{ $moment(text.created_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}
      </span>
    </a-table>
  </a-modal>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '选择',
    },

    couponList: {
      type: Array,
      default() {
        return []
      },
    },

    checkedList: {
      type: Array,
      default() {
        return []
      },
    },
  },

  data() {
    return {
      visible: false,
      selectedRowKeys: [],

      columns: [
        {
          title: 'id',
          dataIndex: 'id',
          width: 80,
        },
        {
          title: '优惠券名称',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
          width: 300,
        },
        {
          title: '优惠金额',
          scopedSlots: { customRender: 'youhui' },
        },
        {
          title: '最低消费',
          dataIndex: 'min_price',
          sorter: true,
        },
        {
          title: '优惠方式',
          scopedSlots: { customRender: 'type' },
        },
        {
          title: '创建时间',
          scopedSlots: { customRender: 'created_at' },
          // fixed: 'right',
        },
      ],
    }
  },

  methods: {
    submit() {
      this.$emit('callBack', this.selectedRowKeys)
      this.visible = false
    },

    // 选中多行
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },

    // cancel() {
    //   this.visible = false
    //   // this.$emit('cancel')
    // },
  },

  watch: {
    checkedList: {
      handler(e) {
        this.selectedRowKeys = e
      },
      deep: true,
    },
  },
}
</script>

<style lang="less" scoped></style>
